<template>
  <div class="color-select">
      <div class="select-box" @click='onClick'>

          <span class="slot"><slot></slot></span>
          <span class="el-icon-arrow-down"></span>
      </div>
      <div class="color-picker" style='width: 0;height:0;z-index: -1; overflow: hidden;'>
          <el-color-picker 
              ref='picker'
              v-model="inColor"
              @change="onChange">
              :predefine="predefineColors">
          </el-color-picker>
      </div>
  </div>
</template>
<script>
export default {
  name: 'HaColorSelect',
  data() {
      return {
          inColor: null,
          predefineColors: [
              '#000',
              '#434343',
              '#666',
              '#999',
              '#b7b7b7',
              '#ccc',
              '#d9d9d9',
              '#efefef',
              '#fff',
              'transparent',

              '#980000',
              '#f00',
              '#f90',
              '#ff0',
              '#0f0',
              '#0ff',
              '#4a86e8',
              '#00f',
              '#90f',
              '#f0f',

              '#e6b8af',
              '#f4cccc',
              '#fce5cd',
              '#fff2cc',
              '#ecead3',
              '#d9ead3',
              '#c9daf8',
              '#cfe2f3',
              '#d9d2e9',
              '#ead1dc',

              '#dd7e6b',
              '#ea9999',
              '#f9cb9c',
              '#ffe599',
              '#b6d7a8',
              '#a2c4c9',
              '#a4c2f4',
              '#9fc5e8',
              '#b4a7d6',
              '#d5a6bd',

              '#cc4125',
              '#e06666',
              '#f6b26b',
              '#ffd966',
              '#93c47d',
              '#76a5af',
              '#6d9eeb',
              '#6fa8dc',
              '#8e7cc3',
              '#c27ba0',

              '#a61c00',
              '#cc0000',
              '#e69138',
              '#f1c232',
              '#6aa84f',
              '#45818e',
              '#3c78d8',
              '#3d85c6',
              '#674ea7',
              '#a64d79',

              '#85200c',
              '#990000',
              '#b45f06',
              '#bf9000',
              '#38761d',
              '#134f5c',
              '#1155cc',
              '#0b5394',
              '#351c75',
              '#741b47',

              '#5b0f00',
              '#660000',
              '#783f04',
              '#7f6000',
              '#274e13',
              '#0c343d',
              '#1c4587',
              '#073763',
              '#20124d',
              '#4c1130',

              '#66ff94',
          ]
      }
  },
  props: {
      value: { type: String, default: '#fff'},

  },
  model: {
      event: 'change',
      prop: 'value'
  },
  created() {

  },
  methods: {
      onClick() {
          this.$refs.picker.handleTrigger()
      },

      onChange(color) {
          this.inColor = color;
          this.$emit('change', color);
      }
  }
}
</script>
<style lang="scss" scoped>
.color-select{
  position: relative;
  .color-picker{
      position: absolute;
      top: 0;
      left: 0;
  }
}
</style>